<!-- Notes List Tab -->
<div id="tabNotesList" class="tab-content">
    <div class="endpoint-section" id="notesList">
        <h2>
            <span class="endpoint-method get">GET</span>
            <span class="endpoint-path">/api/v1/notes - List Notes</span>
        </h2>
        <p>List all notes for current user with pagination.</p>

        <div class="columns">
            <div class="column">
                <div class="form-group">
                    <label for="notesList_limit">Limit:</label>
                    <input type="number" id="notesList_limit" value="20" min="1" max="100">
                </div>
            </div>
            <div class="column">
                <div class="form-group">
                    <label for="notesList_offset">Offset:</label>
                    <input type="number" id="notesList_offset" value="0" min="0">
                </div>
            </div>
        </div>

        <div class="form-group">
            <label>
                <input type="checkbox" id="notesList_include_keywords"> Include Keywords
            </label>
        </div>
        <div class="columns">
            <div class="column">
                <button class="api-button" onclick="makeRequest('notesList', 'GET', '/api/v1/notes', 'query')">
                    List Notes
                </button>
            </div>
            <div class="column">
                <div class="form-group">
                    <input type="text" id="notesList_dl_filename" placeholder="Filename (no extension)" value="notes_visible">
                    <button class="api-button" onclick="notesDownloadVisibleList()">Download Visible (CSV)</button>
                </div>
            </div>
        </div>


        <h3>cURL Command:</h3>
        <pre id="notesList_curl">---</pre>

        <h3>Response:</h3>
        <pre id="notesList_response">---</pre>

        <h3>Summary:</h3>
        <div id="notesList_summary" class="api-summary">(no data)</div>

        <h3>Notes (Table View):</h3>
        <div class="table-responsive">
            <table id="notesList_table" class="api-table">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>ID</th>
                        <th>Version</th>
                        <th>Last Modified</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td colspan="4"><em>No data</em></td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="endpoint-section" id="notesSearch">
        <h2>
            <span class="endpoint-method get">GET</span>
            <span class="endpoint-path">/api/v1/notes/search - Search Notes</span>
        </h2>
        <p>Search notes for current user.</p>

        <div class="form-group">
            <label for="notesSearch_query">Search Query:</label>
            <input type="text" id="notesSearch_query" placeholder="Enter search terms...">
        </div>

        <div class="form-group">
            <label for="notesSearch_limit">Limit:</label>
            <input type="number" id="notesSearch_limit" value="10" min="1" max="100">
        </div>

        <div class="form-group">
            <label>
                <input type="checkbox" id="notesSearch_include_keywords"> Include Keywords
            </label>
        </div>

        <div class="columns">
            <div class="column">
                <button class="api-button" onclick="makeRequest('notesSearch', 'GET', '/api/v1/notes/search', 'query')">
                    Search Notes
                </button>
            </div>
            <div class="column">
                <div class="form-group">
                    <input type="text" id="notesSearch_dl_filename" placeholder="Filename (no extension)" value="notes_search">
                    <button class="api-button" onclick="notesDownloadVisibleSearch()">Download Visible (CSV)</button>
                </div>
            </div>
        </div>

        <h3>cURL Command:</h3>
        <pre id="notesSearch_curl">---</pre>

        <h3>Response:</h3>
        <pre id="notesSearch_response">---</pre>

        <h3>Summary:</h3>
        <div id="notesSearch_summary" class="api-summary">(no data)</div>

        <h3>Notes (Table View):</h3>
        <div class="table-responsive">
            <table id="notesSearch_table" class="api-table">
                <thead>
                    <tr>
                        <th>Title</th>
                        <th>ID</th>
                        <th>Version</th>
                        <th>Last Modified</th>
                    </tr>
                </thead>
                <tbody>
                    <tr><td colspan="4"><em>No data</em></td></tr>
                </tbody>
            </table>
        </div>
    </div>

    <div class="endpoint-section" id="notesGet">
        <h2>
            <span class="endpoint-method get">GET</span>
            <span class="endpoint-path">/api/v1/notes/{note_id} - Get Note</span>
        </h2>
        <p>View a specific note by ID. Keywords are included automatically.</p>

        <div class="form-group">
            <label for="notesGet_note_id">Note ID <span class="required">*</span>:</label>
            <input type="number" id="notesGet_note_id" placeholder="1" min="1">
        </div>

        <button class="api-button" onclick="makeRequest('notesGet', 'GET', '/api/v1/notes/{note_id}', 'none')">
            Get Note
        </button>

        <h3>cURL Command:</h3>
        <pre id="notesGet_curl">---</pre>

        <h3>Response:</h3>
        <pre id="notesGet_response">---</pre>
        <div class="form-group">
            <button class="api-button" onclick="notesCreateFlashcardsFromDisplayed()">Create Flashcards from Highlighted Text</button>
        </div>
    </div>

    <div class="endpoint-section" id="notesExportGet">
        <h2>
            <span class="endpoint-method get">GET</span>
            <span class="endpoint-path">/api/v1/notes/export - Export Notes (GET)</span>
        </h2>
        <p>Export notes via GET. Supports JSON or CSV (use Download toggle for CSV).</p>

        <div class="columns">
            <div class="column">
                <div class="form-group">
                    <label for="notesExportGet_q">Query (optional):</label>
                    <input type="text" id="notesExportGet_q" placeholder="Search query for filtering">
                </div>
            </div>
            <div class="column">
                <div class="form-group">
                    <label for="notesExportGet_limit">Limit:</label>
                    <input type="number" id="notesExportGet_limit" value="100" min="1" max="10000">
                </div>
            </div>
            <div class="column">
                <div class="form-group">
                    <label for="notesExportGet_offset">Offset:</label>
                    <input type="number" id="notesExportGet_offset" value="0" min="0">
                </div>
            </div>
        </div>

        <div class="columns">
            <div class="column">
                <div class="form-group">
                    <label>
                        <input type="checkbox" id="notesExportGet_include_keywords"> Include Keywords
                    </label>
                </div>
            </div>
            <div class="column">
                <div class="form-group">
                    <label for="notesExportGet_format">Format:</label>
                    <select id="notesExportGet_format">
                        <option value="json">json</option>
                        <option value="csv" selected>csv</option>
                    </select>
                </div>
            </div>
            <div class="column">
                <div class="form-group">
                    <label>
                        <input type="checkbox" id="notesExportGet_download"> Download
                    </label>
                    <input type="text" id="notesExportGet_filename" placeholder="Filename (no extension)" value="notes_export">
                </div>
            </div>
        </div>

        <button class="api-button" onclick="makeRequest('notesExportGet', 'GET', '/api/v1/notes/export', 'query')">
            Export (GET)
        </button>

        <h3>cURL Command:</h3>
        <pre id="notesExportGet_curl">---</pre>

        <h3>Response:</h3>
        <pre id="notesExportGet_response">---</pre>
    </div>

    <div class="endpoint-section" id="notesExportPost">
        <h2>
            <span class="endpoint-method post">POST</span>
            <span class="endpoint-path">/api/v1/notes/export - Export Notes (POST)</span>
        </h2>
        <p>Export selected notes via POST by specifying note_ids. For CSV, use GET above or copy IDs and set format=csv here to view inline.</p>

        <div class="form-group">
            <label for="notesExportPost_payload">Export Payload (JSON):</label>
            <textarea id="notesExportPost_payload" class="code-input" rows="8">{
  "note_ids": ["note-id-1", "note-id-2"],
  "include_keywords": true,
  "format": "json"
}</textarea>
        </div>

        <button class="api-button" onclick="makeRequest('notesExportPost', 'POST', '/api/v1/notes/export', 'json')">
            Export (POST)
        </button>

        <h3>cURL Command:</h3>
        <pre id="notesExportPost_curl">---</pre>

        <h3>Response:</h3>
        <pre id="notesExportPost_response">---</pre>
    </div>
</div>

<!-- Notes Manage Tab -->
<div id="tabNotesManage" class="tab-content">
    <div class="endpoint-section" id="notesCreate">
        <h2>
            <span class="endpoint-method post">POST</span>
            <span class="endpoint-path">/api/v1/notes - Create Note</span>
        </h2>
        <p>Create a new note.</p>

        <div class="form-group">
            <label for="notesCreate_title">Title <span class="required">*</span>:</label>
            <input type="text" id="notesCreate_title" placeholder="Note Title">
        </div>

        <div class="form-group">
            <label for="notesCreate_content">Content <span class="required">*</span>:</label>
            <textarea id="notesCreate_content" rows="8" placeholder="Note content..."></textarea>
        </div>

        <div class="form-group">
            <label for="notesCreate_keywords">Keywords (comma-separated):</label>
            <input type="text" id="notesCreate_keywords" placeholder="tag1, tag2, tag3">
            <small>Tip: This field accepts comma-separated keywords. To send a JSON list instead, use the API directly or Bulk Create below.</small>
        </div>

        <button class="api-button" onclick="makeRequest('notesCreate', 'POST', '/api/v1/notes', 'json')">
            Create Note
        </button>

        <h3>cURL Command:</h3>
        <pre id="notesCreate_curl">---</pre>

        <h3>Response:</h3>
        <pre id="notesCreate_response">---</pre>
    </div>

    <div class="endpoint-section" id="notesBulkCreate">
        <h2>
            <span class="endpoint-method post">POST</span>
            <span class="endpoint-path">/api/v1/notes/bulk - Bulk Create Notes</span>
        </h2>
        <p>Create multiple notes in a single call. Supports keywords per note (comma-separated or list in raw JSON).</p>

        <div class="form-group">
            <label for="notesBulkCreate_payload">Bulk Payload (JSON):</label>
            <textarea id="notesBulkCreate_payload" class="code-input" rows="12">{
  "notes": [
    { "title": "Note A", "content": "Alpha", "keywords": "tag1, tag2" },
    { "title": "Note B", "content": "Bravo", "keywords": ["tag2", "Tag3"] }
  ]
}</textarea>
        </div>

        <button class="api-button" onclick="makeRequest('notesBulkCreate', 'POST', '/api/v1/notes/bulk', 'json')">
            Bulk Create Notes
        </button>

        <h3>cURL Command:</h3>
        <pre id="notesBulkCreate_curl">---</pre>

        <h3>Response:</h3>
        <pre id="notesBulkCreate_response">---</pre>
    </div>

    <div class="endpoint-section" id="notesUpdate">
        <h2>
            <span class="endpoint-method put">PUT</span>
            <span class="endpoint-path">/api/v1/notes/{note_id} - Update Note</span>
        </h2>
        <p>Update an existing note with optimistic locking.</p>

        <div class="form-group">
            <label for="notesUpdate_id">Note ID <span class="required">*</span>:</label>
            <input type="number" id="notesUpdate_id" placeholder="1">
        </div>

        <div class="form-group">
            <label for="notesUpdate_payload">Update Payload (JSON):</label>
            <textarea id="notesUpdate_payload" class="code-input" rows="10">{
  "title": "Updated Title",
  "content": "Updated content",
  "keywords": ["new", "keywords"],
  "version": 1
}</textarea>
        </div>

        <button class="api-button" onclick="makeRequest('notesUpdate', 'PUT', '/api/v1/notes/{id}', 'json')">
            Update Note
        </button>

        <h3>cURL Command:</h3>
        <pre id="notesUpdate_curl">---</pre>

        <h3>Response:</h3>
        <pre id="notesUpdate_response">---</pre>
    </div>

    <div class="endpoint-section" id="notesDelete">
        <h2>
            <span class="endpoint-method delete">DELETE</span>
            <span class="endpoint-path">/api/v1/notes/{note_id} - Delete Note</span>
        </h2>
        <p>Soft-delete a note with optimistic locking.</p>

        <div class="form-group">
            <label for="notesDelete_id">Note ID <span class="required">*</span>:</label>
            <input type="number" id="notesDelete_id" placeholder="1">
        </div>

        <div class="form-group">
            <label for="notesDelete_version">Version (for optimistic locking):</label>
            <input type="number" id="notesDelete_version" placeholder="1">
        </div>

        <button class="api-button btn-danger" onclick="if(confirm('Delete this note?')) makeRequest('notesDelete', 'DELETE', '/api/v1/notes/{id}', 'query')">
            Delete Note
        </button>

        <h3>cURL Command:</h3>
        <pre id="notesDelete_curl">---</pre>

        <h3>Response:</h3>
        <pre id="notesDelete_response">---</pre>
    </div>
</div>

<!-- Notes Keywords Tab -->
<div id="tabNotesKeywords" class="tab-content">
    <div class="endpoint-section" id="notesKeywords">
        <h2>Notes Keywords Management</h2>

        <div class="form-group">
            <h3>Create Keyword</h3>
            <label for="notesKeyword_text">Keyword Text <span class="required">*</span>:</label>
            <input type="text" id="notesKeyword_text" placeholder="Enter keyword">
            <button class="api-button" onclick="makeRequest('notesKeywordCreate', 'POST', '/api/v1/notes/keywords', 'json')">
                Create Keyword
            </button>
        </div>

        <div class="form-group mt-3">
            <h3>Link Note to Keyword</h3>
            <div class="columns">
                <div class="column">
                    <label for="notesLink_noteId">Note ID:</label>
                    <input type="number" id="notesLink_noteId" placeholder="1">
                </div>
                <div class="column">
                    <label for="notesLink_keywordId">Keyword ID:</label>
                    <input type="number" id="notesLink_keywordId" placeholder="1">
                </div>
            </div>
            <button class="api-button" onclick="makeRequest('notesLink', 'POST', '/api/v1/notes/{noteId}/keywords/{keywordId}', 'none')">
                Link Note to Keyword
            </button>
        </div>

        <h3>Response:</h3>
        <pre id="notesKeywords_response">---</pre>
    </div>
</div>
